<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>地图符号</title>
        <style>
            body {
                width: 1000px;
                margin: 0 auto;
                position: relative;
                border-left: 3px solid black;
                border-right: 3px solid black;
            }
            header,footer {
                background-color: #6991c7;
                border-top: 3px solid black;
                border-bottom: 3px solid black;
            }
            header {
                height: 50px;
            }
            main {
                background-color: #bac8e0;
            }
            footer {
                height: 40px;
				clear: both;
            }
            h2,h3 {
                line-height: 1;
                margin: 10px 0 10px 0;
                font-family: "楷体";
                text-align: center;
            }
            h2 {
                font-size: 30px;
            }
            h3 {
                font-size: 20px;
            }
			#navCont {
				padding: 16px;
                margin: 0px auto;
                text-align: center;
                font-family: "仿宋";
                font-weight: bold;
                font-size: 18px;
            }
            #navCont button {
                display: inline;
                line-height: 1.5;
                font-family: "仿宋";
                font-weight: bold;
                font-size: 18px;
                text-align: center;
                border: 1px solid black;
                margin: 0 auto;
            }
            #navCont button:hover {
                color: white;
                background-color: rgba(0,0,0,0.5);
            }
            #mapCont {
                margin: 0 auto;
				padding: 0 16px 54px 16px;
            }
			#mapCont canvas {
				display: block;
                margin: 0 auto;
				padding: 16px;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>地图符号</h2>
        </header>
        <main>
            <div id="navCont">
				<input type="file" multiple="true" id="file" style="visibility: hidden; position: absolute; width: 0;">
                <button type="button" onclick="file.click();">加载文件</button>
                <button type="button" onclick="ReadFile();">开始绘制</button>
            </div>
            <div id="mapCont">
                <canvas id="canvas" width="840" height="500" style="border: 1px solid black;"></canvas>
            </div>
        </main>
        <footer>
            <h3>10170312</h3>
		</footer>
		<script>
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');

			function ReadFile() {
                var files = document.getElementById('file').files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    var content = null;
                    reader.readAsText(file);
                    var n = 0;
                    reader.onload = function () {
                        content = this.result;
                        DrawFile(content, n);
                        n++;
                    }
                }
			}
			
			
            //叉积
            function mult(a, b, c) {
                return (a[0] - c[0]) * (b[1] - c[1]) - (b[0] - c[0]) * (a[1] - c[1]);
            }

            //判断点p是否在obj内
            function CheckIn(obj, p) {
                var xmax = 0, xmin = 999999999, ymax = 0, ymin = 999999999;
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i][0] < xmin) {
                        xmin = obj[i][0];
                    }
                    if (obj[i][0] > xmax) {
                        xmax = obj[i][0];
                    }
                    if (obj[i][1] < ymin) {
                        ymin = obj[i][1];
                    }
                    if (obj[i][1] > ymax) {
                        ymax = obj[i][1];
                    }
                }

                var p0 = [xmax + 1000, p[1]];
                var number = 0;
                for (var i = 0; i < obj.length - 1; i++) {
                    var p1 = obj[i];
                    var p2 = obj[i + 1];
                    if (mult(p1, p0, p) * mult(p0, p2, p) >= 0
                        && mult(p, p2, p1) * mult(p2, p0, p1) >= 0) {
                        number++;
                    }
                }
                if ((number % 2) != 0) {
                    return true;
                }
                return false;
            }


            function min(a, b) {
                if (a < b) {
                    return a;
                }
                return b;
            }


            function max(a, b) {
                if (a > b) {
                    return a;
                }
                return b;
            }

            function CheckCrossed(p1, p2, q1, q2) {
                if (min(p1[0], p2[0]) <= max(q1[0], q2[0]) &&
                    min(q1[0], q2[0]) <= max(p1[0], p2[0]) &&
                    min(p1[1], p2[1]) <= max(q1[1], q2[1]) &&
                    min(q1[1], q2[1]) <= max(p1[1], p2[1])) {
                    if (((q1[0] - p1[0]) * (q1[1] - q2[1]) - (q1[1] - p1[1]) * (q1[0] - q2[0])) * ((q1[0] - p2[0]) * (q1[1] - q2[1]) - (q1[1] - p2[1]) * (q1[0] - q2[0])) < 0 &&
                        ((p1[0] - q1[0]) * (p1[1] - p2[1]) - (p1[1] - q1[1]) * (p1[0] - p2[0])) * ((p1[0] - q2[0]) * (p1[1] - p2[1]) - (p1[1] - q2[1]) * (p1[0] - p2[0])) < 0
                    ) {
                        return true;
                    }
                }
                return false;
            }

            function GetCrossed(q1, q2, obj) {
                var points = [];
                for (var i = 0; i < obj.length - 1; i++) {
                    var p1 = obj[i];
                    var p2 = obj[i + 1];
                    if (!CheckCrossed(q1, q2, p1, p2))
                        continue;
                    //求交点
                    var tmpLeft = (q2[0] - q1[0]) * (p1[1] - p2[1]) - (p2[0] - p1[0]) * (q1[1] - q2[1]);
                    var tmpRight = (p1[1] - q1[1]) * (p2[0] - p1[0]) * (q2[0] - q1[0]) + q1[0] * (q2[1] - q1[1]) * (p2[0] - p1[0]) - p1[0] * (p2[1] - p1[1]) * (q2[0] - q1[0]);

                    var x = tmpRight / tmpLeft;

                    var tmpLeft = (p1[0] - p2[0]) * (q2[1] - q1[1]) - (p2[1] - p1[1]) * (q1[0] - q2[0]);
                    var tmpRight = p2[1] * (p1[0] - p2[0]) * (q2[1] - q1[1]) + (q2[0] - p2[0]) * (q2[1] - q1[1]) * (p1[1] - p2[1]) - q2[1] * (q1[0] - q2[0]) * (p2[1] - p1[1]);

                    var y = tmpRight / tmpLeft;
                    points.push([x, y]);
                }

                points.sort(function (a, b) {
                    return a[0] - b[0];
                });
                return points;
            }

            function DrawBuilding(obj) {
                var xmax = 0, xmin = 999999999, ymax = 0, ymin = 999999999;
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i][0] < xmin) {
                        xmin = obj[i][0];
                    }
                    if (obj[i][0] > xmax) {
                        xmax = obj[i][0];
                    }
                    if (obj[i][1] < ymin) {
                        ymin = obj[i][1];
                    }
                    if (obj[i][1] > ymax) {
                        ymax = obj[i][1];
                    }
                }

                xmax = xmax + 10;
                ymax = ymax + 10;
                xmin = xmin - 10;
                ymin = ymin - 10;

                var ypen = ymin + xmin - xmax;
                while (ypen <= ymax + xmax - xmin) {
                    var start = [xmin, ypen];
                    var end = [xmax, ypen + Math.sqrt(2) / 2 * (xmax - xmin)];
                    var points = GetCrossed(start, end, obj);
                    if (points.length != 0) {
                        for (var i = 0; i < parseInt(points.length / 2); i++) {
                            start = GetPoint(points[2 * i]);
                            end = GetPoint(points[2 * i + 1]);
                            context.strokeStyle = "black";
                            context.beginPath();
                            context.moveTo(start[0], start[1]);
                            context.lineTo(end[0], end[1]);
                            context.stroke();
                        }
                    }
                    ypen = ypen + 3;
                }
            }

            function DrawVegrgnSymbol(x, y, count) {

                if (count % 2 == 0) {
                    context.beginPath();
                    context.moveTo(x, y);
                    context.lineTo(x + 3, y + 1);
                    context.lineWidth = 1;
                    context.strokeStyle = "#993333";
                    context.stroke();
                }
                else {
                    context.beginPath();
                    context.moveTo(x, y);
                    context.lineTo(x + 3, y);
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    context.stroke();
                }
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(x, y - 2);
                context.lineWidth = 1;
                context.strokeStyle = "green";
                context.stroke();

                context.beginPath();
                context.moveTo(x + 3, y);
                context.lineTo(x + 3, y - 2);
                context.lineWidth = 1;
                context.strokeStyle = "green";
                context.stroke();

            }

            function DrawVegrgn(obj) {
                var xmax = 0, xmin = 999999999, ymax = 0, ymin = 999999999;
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i][0] < xmin) {
                        xmin = obj[i][0];
                    }
                    if (obj[i][0] > xmax) {
                        xmax = obj[i][0];
                    }
                    if (obj[i][1] < ymin) {
                        ymin = obj[i][1];
                    }
                    if (obj[i][1] > ymax) {
                        ymax = obj[i][1];
                    }
                }

                var count = 0;
                var ypen = ymin;
                while (ypen <= ymax) {
                    var xpen = xmin;
                    count++;
                    while (xpen <= xmax) {
                        if (CheckIn(obj, [xpen, ypen]) && CheckIn(obj, [xpen + 1.07, ypen])) {
                            var p = GetPoint([xpen, ypen]);
                            DrawVegrgnSymbol(p[0], p[1], count);
                        }
                        xpen = xpen + 4;
                    }
                    ypen = ypen + 4;
                }
            }

            function DrawFile(content, n) {
                var data = content.split('\r\n');
                context.lineWidth = 1;
                var obj = [];
                var count = 0;
                for (var i = 0; i < data.length; i++) {
                    var line = data[i];
                    if (line == "END") {
                        context.stroke();
                        count = 0;
                        if (n == 0) {
                            DrawBuilding(obj);
                        }
                        else {
                            DrawVegrgn(obj);
                        }
                        continue;
                    }
                    var point = line.split(',');
                    if (point.length < 2) {
                        count = 1;
                        obj = [];
                        continue;
                    }
                    point[0] = parseFloat(point[0]);
                    point[1] = parseFloat(point[1]);
                    if (count == 1) {
                        context.beginPath();
                        if (n == 1) {
                            context.strokeStyle = "green";
                        }
                        else {
                            context.strokeStyle = "black";
                        }
                        obj.push(point);
                        var p = GetPoint(point);
                        context.moveTo(p[0], p[1]);
                        count++;
                    }
                    else {
                        obj.push(point);
                        var p = GetPoint(point);
                        context.lineTo(p[0], p[1]);
                    }
                }
            }

            function GetPoint(point) {
                x = (point[0] - 430000) * 2.8 + 70;
                y = canvas.height - (point[1] - 3260000) * 2.8 + 1185;
                return [x, y];
            }
		</script>
    </body>
</html>
    